<template >

  <div class="main">

    <el-form ref="formRef" :model="numberValidateForm" label-width="100px" class="demo-ruleForm">
      <img src="https://pic2.zhimg.com/80/v2-f6b1f64a098b891b4ea1e3104b5b71f6_720w.png" >
      <!-- 账号框 -->
      <el-form-item label="账号" prop="username" :rules="usernameReg" >
        <el-input v-model="numberValidateForm.username" type="text" autocomplete="off" placeholder="请输入账号" />
      </el-form-item>
      <!-- 密码框 -->
      <el-form-item label="密码" prop="password" :rules="passwordReg">
        <el-input v-model="numberValidateForm.password" type="text" autocomplete="off" placeholder="请输入密码" />
      </el-form-item>
      <!-- 提交和重置按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm(formRef)" :loading="loading">提交</el-button>
        <el-button @click="resetForm(formRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script setup>
import { reactive, ref } from 'vue'
import {getLogin} from '../api/login'
import {useRouter} from 'vue-router'
import {useAppStore} from '../stores/user'
import { ElMessage } from 'element-plus'
const useStore=useAppStore()
const  router = useRouter()
const formRef = ref()

const loading=ref(false)

const numberValidateForm = reactive({
  username: '',
  password: ''
})

// 账号和密码的验证
const usernameReg = ref([
  { required: true, message: '账号不能为空' },
//   { type: 'number', message: '账号只能是数字' },
  { min:5,max:15,message:'长度为5-15位'}
])
const passwordReg = [
  { required: true, message: '密码不能为空' },
  { type: 'string', message: '密码只能是数字' }
]

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    // console.log(valid);
    try {
      if (valid) {
      console.log('提交成功!')
      loading.value=true
      // 携带数据,发起请求
      const data =   await  getLogin(numberValidateForm)
      // console.log(data);
      if(data.meta.status==200){
        ElMessage({
          message:data.meta.msg,
          type:'success'
        })
            // 保存token和账户名字
            useStore.setLocalstorage(data.data.token)
            useStore.setLocalstorageUsername(data.data.username)
            // console.log(router.getRoutes());
            // 跳转路由
            router.replace({name:'dashboard_console'})
        }else{
          ElMessage({
          message:data.meta.msg,
          type:'error'
        })
        }
      }
    } 
    catch(error){
      console.log(error);
    }
    finally{
        // console.log('我执行完成了');
      loading.value=false
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style lang="scss" scoped>
.main{
  width: 100%;
  height: 100%;
  background:url('https://static.zhihu.com/heifetz/assets/sign_bg.47eec442.png');
  background-color: #b8e5f8;
  position: fixed;

}
.el-form{
  width: 400px;
  height: 250px;
  background-color: #fff;
  box-sizing: border-box;
  padding-right: 60px;
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
img{
      width: 128px;
      height: 81px;
      padding-left: 135px;
    }
</style>
